import AlertCircle from "@/assets/image/icons/alert-circle.svg";
import AlertFill from "@/assets/image/icons/alert-fill.svg";
import { ProForm, ProFormCheckbox } from "@ant-design/pro-components";
import { Alert, Button, Descriptions, Divider, Tooltip } from "antd";
import "./index.less";
import { history } from "umi";
import { CustomSubTitle, CustomTitle } from "@/components/customTitle";

const htmlContent = `[ Decline Reason by Admin ]. Please update your account's identity verification. Click <a href="/identity" onClick="window.clickHandlerObj.handleClick(event)">here</a> to complete the verification process.`;
const MyProfileInfo = () => {
  return (
    <div className="myprofile-containery">
      <div className="top-content">
        <CustomTitle>My Profile</CustomTitle>
        <Button className="footer-button" type="default" size={"middle"}>
          Edit My Profile
        </Button>
      </div>

      <div className="alert-content">
        <Alert
          onClick={() => {
            history.push("/identity");
          }}
          message="Account Identity Verification has been Declined"
          type="error"
          showIcon={true}
          icon={<img src={AlertFill} alt="SVG Image" />}
          description={
            <div
              dangerouslySetInnerHTML={{
                __html: htmlContent,
              }}
            />
          }
        />
      </div>
      <div className="myprofile-content">
        <ProForm>
          <div className="basic-information">
            <CustomSubTitle>Basic Information</CustomSubTitle>

            <Descriptions layout="vertical">
              <Descriptions.Item label="Full Name (English)">
                LAM, YAN TING SOPHIE
              </Descriptions.Item>
              <Descriptions.Item label="Full Name (Chinese)">
                -
              </Descriptions.Item>
              <Descriptions.Item label="Email ">
                lamyanting@hkaa.com
              </Descriptions.Item>
              <Descriptions.Item
                label={
                  <>
                    Mobile (OTP-capable){" "}
                    <img
                      className="tips-icon"
                      src={AlertCircle}
                      alt="tips Icon"
                    />
                  </>
                }
              >
                <div className="mobile-input">
                  <span className="area-code">+852</span>
                  <input disabled className="mobile" value={"92211024"} />
                </div>
              </Descriptions.Item>

              <Descriptions.Item label="Account ID no.">
                00000001
              </Descriptions.Item>
              <Descriptions.Item label="Company">
                <span className="company-name">
                  Hong Kong Airport Authority
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="User Profile Registration Status">
                <span className="verification-status">Declined</span>
              </Descriptions.Item>
            </Descriptions>

            <Divider plain></Divider>
            <ProFormCheckbox name="a">
              <div className="checkbox-content">
                <span>
                  Receive our{" "}
                  <span className="highlight-text ">promotional marketing</span>{" "}
                  email.
                </span>
                <Tooltip
                  placement="top"
                  title="Please note that it may take up to 10 working days to process your unsubscribe request."
                  open
                >
                  {/* <div className='tips-icon'/> */}
                  <img
                    className="tips-icon"
                    src={AlertCircle}
                    alt="tips Icon"
                  />
                </Tooltip>
              </div>
            </ProFormCheckbox>
          </div>
        </ProForm>
      </div>
    </div>
  );
};

export default MyProfileInfo;
